<template>
<div id="roleRe">
    <Modal v-model="role.roleResourceModalSta" title="资源配置" :loading="loading" @on-ok="roleResourceOk">
        <Row>
            <Col :span="20">
            <Tree :data="role.roleResourceListSta" show-checkbox multiple></Tree>
            </Col>
        </Row>
    </Modal>
</div>
</template>
<script>
import Vue from 'vue';
import {
    Modal,
    Row,
    Col,
    Tree,
    Message
} from 'iview'
Vue.prototype.$Modal = Modal;
Vue.prototype.$Message = Message;
import {
    mapState,
    mapMutations,
    mapActions
} from 'vuex'
export default {
    name: 'RoleRe',
    data() {
        return {
            loading: true
        };
    },
    created() {
        this.roleResourceListAct(); //调用获取当前角色的资源
    },
    mounted() {},
    computed: {
        ...mapState({
            role: state => state.role //vuex角色
        })
    },
    methods: {
        ...mapMutations([
            'roleResourceModalMut'
        ]),
        ...mapActions([
            'roleResourceListAct'
        ]),
        //提交
        roleResourceOk() {
            let _self = this;
            setTimeout(() => {
                let obj = {
                    roleId: this.role.roleOneSta.id,
                    roleResource: this.role.roleResourceListSta
                };
                console.log('roleId', this.role.roleOneSta.id)
                console.log('roleResource', this.role.roleResourceListSta)
                this.$axios.post('/acl_role/editRoleResource', obj).then(res => {
                    console.log('1111', res);
                    let state = res.data;
                    if (state) {
                        _self.roleResourceModalMut({
                            state: false
                        }); //关闭模态框
                    } else {
                        _self.$Message.error('数据库更新失败，请重新提交');
                    }
                });
                this.roleResourceModalMut({
                    state: false
                }); //关闭模态框
                //动画
                this.loading = false;
                this.$nextTick(() => {
                    this.loading = true;
                });
            }, 2000);
        }
    },
    components: {
        Modal,
        Row,
        Col,
        Tree,
        Message
    }
}
</script>
